<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thmeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action="/add" method="post">
  <table border="1">
    <tr>
      <td colspan="2"><h1>添加停车记录</h1></td>
    </tr>
    <tr>
      <td>车牌号(*)</td>
      <td><input name="carNum"/></td>
    </tr>
    <tr>
      <td>车型(*)</td>
      <td><input name="brand"/></td>
    </tr>
    <tr>
      <td>分区编号(*)</td>
      <td><select name="regionId"><option value="">---请选择---</option> </select></td>
    </tr>
    <tr>
      <td>停车时间(*)</td>
      <td><input name="addTime" type="date"/></td>
    </tr>
    <tr>
      <td><input value="添加" type="submit"/></td>
      <td><input value="返回" type="button" th:onclick="javascript:location.href='/'" /></td>
    </tr>
  </table>
</form>
<script src="webjars/jquery/3.5.1/jquery.js"></script>
<script th:inline="javascript">
  function selectType() {
    $.getJSON("/type",function (data) {
      for (let i = 0; i < data.length; i++) {
        $("[name=regionId]").append("<option value='"+data[i].id+"'>"+data[i].name+"</option>")
      }
    })
  }
  selectType()

  $("form").submit(function (){
    var carNum=$("[name=carNum]").val()
    var brand=$("[name=brand]").val()
    var regionId=$("[name=regionId]").val()
    var addTime=$("[name=addTime]").val()
    var time=/^\d{4}-\d{2}-\d{2}$/;
    if (carNum=='' || brand=='' ||regionId=='' ){
      alert("请填写完整的信息")
      return false
    }else if (time.test(addTime)==false){
      alert("日期格式不正确")
      return false
    }
  })

</script>
</body>
</html>